<template>
  <div
    class="box-border w-full h-full p-[40px] overflow-y-auto scrollbar scrollbar-thumb-gray-300"
    ref="homeRef"
  >
    <div class="grid grid-cols-4 gap-[40px]">
      <div
        class="box-border flex items-center justify-center cursor-pointer bg-white/50 rounded-[12px] border_white h-[260px] w-full"
        @click="goRouter"
      >
        <div class="text-black text-[20px] font-bold flex items-center gap-[10px]">
          <img src="../assets/images/add.png" class="w-[14px] h-[14px]" />
          <span>开始任务</span>
        </div>
      </div>
      <template v-if="taskList && taskList.length > 0">
        <div
          v-for="(item, index) in taskList"
          :key="index"
          class="flex items-center justify-center bg-white/50 rounded-[12px] border_white h-[260px] w-full"
        >
          <div class="w-full my-4">
            <div class="flex items-center justify-center gap-4">
              <img :src="taskLogo" class="w-8 h-8" />
              <span class="text-[20px] font-bold">任务名称</span>
            </div>
            <div class="mt-4 text-[18px] flex justify-center">
              <div class="space-y-2">
                <div>· 开始时间：{{ item.start_time }}</div>
                <div>· 任务时长：- -</div>
                <div>· 检测数量：- -</div>
                <div>· 有效告警：- -</div>
              </div>
            </div>
            <div class="flex justify-center mt-2">
              <el-button type="primary" plain class="!w-[90%] !h-[48px]" @click="goHistory(item)"
                >查看</el-button
              >
            </div>
          </div>
        </div>
      </template>
    </div>
    <!-- <div class="flex justify-end mt-8">
      <el-pagination
        :hide-on-single-page="isHidePager"
        background
        layout="total,prev, pager,next,jumper"
        :total="total"
        :page-size="12"
        :current-page="curPageNum"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div> -->
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
import taskLogo from '../assets/images/task_logo.png'
import { getTaskList } from '@/api/task'
const homeRef = ref(null)
const router = useRouter()
// const curPageNum = ref(1)
// const total = ref(14)

// const handleCurrentChange = (page) => {
//   console.log('🐯 ~ handleCurrentChange ~ page:', page)
//   curPageNum.value = page
//   homeRef.value.scrollTo({
//     top: 0,
//     behavior: 'smooth',
//   })
// }
// const isHidePager = computed(() => {
//   return total.value <= 12
// })
const goRouter = () => {
  router.push('/task_setting')
}
const goHistory = (item) => {
  console.log("🐯 ~ goHistory ~ item:", item)
  router.push({ path: '/history', query: { task_id: item.task_id, model_id: item.model_id } })
}

const taskList = ref([])
const getTaskListData = async () => {
  const res = await getTaskList()
  console.log('🐯 ~ getTaskListData ~ res:', res)
  res.data.forEach((item) => {
    const timeStr = item.task_name.replace('的任务', '')
    const year = timeStr.substring(0, 4)
    const month = timeStr.substring(4, 6)
    const day = timeStr.substring(6, 8)
    const hour = timeStr.substring(8, 10)
    const minute = timeStr.substring(10, 12)
    item.start_time = `${year}-${month}-${day} ${hour}:${minute}`
  })
  taskList.value = res.data
}
onMounted(() => {
  getTaskListData()
})
</script>

<style scoped></style>
